<script>
const scale = 1.4;
export default {
  data() {
    return { scale }
  },
  props: {
    list: {
      default: []
    }
  }
}
</script>
<template>
  <div class="cells_auto_fill">
    <div class="cell-box" v-if="list.length === 3">
      <image class="left-img" :src="list[0].img_url" :style="{height:list[0].h/scale,width:list[0].w/scale}"></image>
      <div class="right-cell">
        <image class="right-img" :src="list[1].img_url" :style="{height:list[1].h/scale,width:list[1].w/scale}"></image>
        <image class="right-bottom-img" :src="list[2].img_url" :style="{height:list[2].h/scale,width:list[2].w/scale}"></image>
      </div>
    </div>
    <div class="cell" v-else v-for="(item,$index) in list" :key="$index">
      <image class="img" :src="item.img_url" :style="{height:item.h/scale,width:item.w/scale}"></image>
    </div>
  </div>
</template>
<style scoped>
.cells_auto_fill {
  flex-direction: row;
  justify-content: space-around;
  background-color: #fff;
}

.cell-box {
  flex-direction: row;
  justify-content: space-around;
}

.right-cell {
  margin-left: 4px;
}

.right-bottom-img {
  margin-top: 4px;
}
</style>
